<template>
	<section
		class="page"
		v-cloak
	>
		<div>login</div>

		<div>{{ uname }}</div>
		<div>父组件num：{{ num }}</div>
		<div>父组件flag：{{ flag }}</div>
		<a-button
			type="primary"
			@click="handleTestClick"
			>父组件改变num</a-button
		>
		<hr />
	</section>

	<Test
		v-model="num"
		v-model:flag="flag"
	/>

	<hr />
	<a-button @click="hide = !hide">点击收起展开</a-button>

	<div>图片组</div>
	<c-image-group
		height="80px"
		:group="[
			'https://drug-platform.cdn.bcebos.com/online/drug/d1689951398547482543.png',
			'https://drug-platform.cdn.bcebos.com/online/drug/d1689948080778174209.png',
			'https://drug-platform.cdn.bcebos.com/online/drug/d1699959962237820000.png'
		]"
	>
	</c-image-group>

	<Transition v-bind="useTransition">
		<div
			class="bg-#f08"
			v-if="hide"
		>
			<div py50>
				<p>1111</p>
				<p>1111</p>
				<p>1111</p>
				<p>1111</p>
				<p>1111</p>
				<p>1111</p>
				<p>1111</p>
				<p>1111</p>
				<p>1111</p>
				<p>1111</p>
				<p>2222</p>
			</div>
		</div>
	</Transition>

	<div>俺是自定义的图片呢，可以预览拖拽等呢</div>
	<c-image
		:maskClosable="false"
		src="https://drug-platform.cdn.bcebos.com/online/drug/d1689951398547482543.png"
	></c-image>

	<!-- <c-desc
		title="个人信息"
		v-loading="loading"
		:dataSource="data"
		:fields="fieldList"
	>
		<template #title> 这是一个自定义的title </template>
		<template #extra>
			<a-button type="primary">click</a-button>
		</template>
	</c-desc> -->

	<Desc
		v-loading="loading"
		title="个人信息"
		:fields="fieldList"
		:data="data"
	>
		<template #title> 这是一个自定义的titleasfas </template>
		<template #extra>
			<a-button type="primary">click</a-button>
		</template>

		<template #like> 这是一个自定义的titleasfas </template>
	</Desc>
	<!-- <div
		class="bg-purple drag fixed w-100vw h-100vh left-0 top-0 z-100 f-c-c"
	>
		<div class="w-400 h-400 bg-yellow" ref="drag">
			<img draggable="false" src="https://drug-platform.cdn.bcebos.com/online/drug/d1689951398547482543.png" alt="">
		</div>
	</div> -->
	<a-divider class="my-10" />

	<c-empty
		size="200"
		height="400"
	>
		<div>sdfasdfasdfasdfasdfasdgdfshfdgjjgfhkgjfdggs</div>
	</c-empty>
	<a-button @click="open = true">openModel</a-button>

	<TestModal
		v-model="open"
		:ok="fetchList"
	/>
</template>

<script lang="tsx" setup>
import CImage from '@/components/CImage/index.vue'
import { useBroadcast, useDrag, useTransition } from '@/hooks'
import Test from './test.vue'
import TestModal from './testModal.vue'

const drag = ref(null)
useDrag(drag)

const uname = ref('')
const num = ref(0)
const flag = ref(false)
const open = ref(false)

function fetchList() {
	return get({
		url: urls.fetchList,
		params: {
			page: 1,
			limit: 1000
		}
	}).then(() => Promise.resolve())
}

const { broadcastEmit } = useBroadcast('demo')
const handleTestClick = () => {
	num.value++
	flag.value = !flag.value
	broadcastEmit()
}

const hide = ref(false)

const fieldList: DescFields = [
	{ field: 'name', label: () => <div>name</div> },
	{ field: 'age', label: '年龄' },
	{
		field: 'image',
		label: <div class="color-purple">自定义的label</div>,
		value(data) {
			return <CImage src={data.image || ''} />
		},
		valueStyle: { color: 'red' }
	},
	{ field: 'like', label: '爱好' },
	{
		field: 'gender',
		label: '性别',
		value(data) {
			const age_enum = {
				1: '男',
				2: '女'
			}
			return <div class="color-fuchsia">{age_enum[data?.gender]}</div>
		}
	},
	{ field: 'job', label: '职业' }
]

const data = reactive({})

const loading = ref(true)
setTimeout(() => {
	loading.value = false
	Object.assign(data, {
		name: 'lbj',
		age: 39,
		gender: 1,
		job: '篮球',
		image: 'https://drug-platform.cdn.bcebos.com/online/drug/d1689948080778174209.png'
	})
}, 2000)
</script>
<style></style>
